<template>
    <div>
        <el-upload
            ref="upload"
            :name="props.file_name"
            :action="props.action"          
            accept=".PDF,.pdf"
            :on-progress="handleProgress"
            :on-success="handleSuccess"
            :on-error="handleError"
            :file-list="fileLists"
            :headers="{token:token}"
            :limit="props.limit"
            :on-exceed="handleExceed"
            >            
            <el-button type="primary">点击上传</el-button>
            <template #tip>
                <div class="el-upload__tip">
                    pdf文件大小在3MB以内,转换时间一般5秒左右
                </div>
            </template>
        </el-upload>  

    </div>
</template>

<script setup>
import { localGet } from '@/utils'
import { reactive, ref, watch, computed, resolveComponent } from 'vue'
import { Delete, Download, Plus, ZoomIn, EditPen,UploadFilled } from '@element-plus/icons-vue'
import { ElMessage, genFileId } from 'element-plus'
import axios from '@/utils/axios'

const props = defineProps({
    limit:{
        type:Number,
        default:5,
    },
    action:{
        type:String,
        default:'#'
    },
    file_name:{
        type:String,
        default: 'upload_file',
    },
    father_method:Function
});

const state = reactive({

})
const upload = ref(null)
let fileLists=ref(props.fileList);
fileLists=props.fileList
const token=ref(localGet('token') || '')
// 确定上传按钮处理事件，开启等待动画
const submitUpload=()=>{
    upload.value.submit();
    
}
// 上传成功后处理结果
const handleSuccess=(response,file,fileList)=>{
    console.log("文件上传子组件得到上传结果：",response)
    submitFileToFather(response)   
}
// 处理上传失败
const handleError=()=>{
    console.log("上传失败")
    // ElMessage.error("上传失败")
}
// 将文件传回给父组件
const submitFileToFather=(response)=>{
    // console.log("我要发送给父组件啦",fileLists)
    const code = 1
    if(props.father_method)props.father_method(code,response)
}
// 用户选择超过规定数量的图片
const handleExceed = (files) => {
    alert("文件超出最大数量")
}
const handleProgress=()=>{
    const code = 0
    if(props.father_method)props.father_method(code,"no")
}
</script>

<style scoped>

</style>
